<template>
  <div class="bigbox">
    <!-- 页面导航搜索盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                      v-model="orgname"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="房间名称">
                  <el-input v-model="roomName" size="small" placeholder="请输入房间名称" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="所属楼栋">
                  <el-input v-model="buildingNo" size="small" placeholder="请输入所属楼栋" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="9" style="text-align: right;">
                <el-form-item label="">
                  <el-button  size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getdatalist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <!-- <div>
        <span >园区/建筑群</span>
        <span>
          <el-select size="small" v-model="orgname" @change=changeqiye>
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
          </el-select>
        </span>
        <span>房间名称</span>
        <span>
          <el-input v-model="roomName" size="small" placeholder="请输入房间名称" style="width: 20%;"></el-input>
        </span>
        <span>所属楼栋</span>
        <span>
          <el-input v-model="buildingNo" size="small" placeholder="请输入所属楼栋" style="width: 20%;"></el-input>
        </span>
      </div>
      <div>
        <el-button  size="small" @click="chongzhi">重置</el-button>
        <el-button type="primary" size="small" @click="getdatalist()">查询</el-button>
      </div> -->
    </div> 
    <!-- 盒子主体 -->
    <div class="bodybox">
      <div class="top">
        <div>区域房间维护</div>
        <div class="butti">
          <span style="margin-right: 10px;"><el-button @click="dialogVisible=true" type="primary" size="small"><i class="el-icon-plus"></i>新增</el-button></span>
          <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="150">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i @click="modify(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click="delet(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </TableColumn>
            <!-- 底部分页 -->
            <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="15"
                @current-change="getdatalist"
                :total="+totalCount">
          </el-pagination>
        </div>
      </div>
      <!-- 新增/修改dialog弹窗区域 -->
      <div class="dialog">
        <el-dialog
        title="房间信息"
        :visible.sync="dialogVisible"
        @close="quxiao"
        width="40%">
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属建筑群" prop="subBuro">
                  <!-- <el-select v-model="form.subBuro" placeholder="请选择所属建筑群" style="width: 100%;" size="small" @change="change">
                    <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.subBuro" class="option"></el-option>
                  </el-select> -->
                  <FilterSelect2
                      v-model="form.subBuro"
                      :optionlist="qiyelist"
                      @updateModelValue="change"
                      :valuekey="{ name: 'name', value: 'subBuro' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房间名称" prop="name">
                  <el-input v-model="form.name" size="small" placeholder="请输入具体地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="房间编号" prop="roomNo">
                  <el-input v-model="form.roomNo" size="small" placeholder="请输入房间编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="房间面积" prop="roomArea">
                  <el-input v-model="form.roomArea" size="small" placeholder="请输入房间面积"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属楼栋" prop="buildingNo">
                  <el-input v-model="form.buildingNo" size="small" placeholder="请输入所属楼栋"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属楼层" prop="floorNo">
                  <el-input v-model="form.floorNo" size="small" placeholder="请输入所属楼层"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="物业费" prop="managePrice">
                  <el-input v-model="form.managePrice" size="small">
                    <span style="color: #333;" slot="suffix">元/平方/月</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="缴费方式" prop="manageFeeType">
                  <el-select v-model="form.manageFeeType" placeholder="请选择缴费方式" style="width: 100%;" size="small">
                    <el-option v-for="(item,index) in shoufeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="租金" prop="rentPrice">
                  <el-input v-model="form.rentPrice" size="small">
                    <span style="color: #333;" slot="suffix">元/平方/月</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="缴费方式" prop="rentFeeType">
                  <el-select v-model="form.rentFeeType" placeholder="请选择缴费方式" style="width: 100%;" size="small">
                    <el-option v-for="(item,index) in shoufeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="memos">
                  <el-input v-model="form.memos" size="small" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer">
          <el-button  size="small" @click="quxiao">取 消</el-button>
          <el-button type="primary" size="small" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {getzidianxialaapi} from '@/api/guidelines'
import {getloginuserapi} from '@/api/cycle'
import {getlistapi,postliseapi,putlistapi,dellistapi} from '@/api/prwpaid/file-management/room'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
   components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      cerateID:'',
      dialogVisible:false,
      issize: 'medium',
      orgname:'',
      qiyelist: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type:'index' ,center:'center',width:'100'},
        { label: '园区建筑群', prop: 'buildingsName' ,width:'220'},
        { label: '栋', prop: 'buildingNo' },
        { label: '层', prop: 'floorNo' },
        { label: '区域房间', prop: 'name' },
        { label: '区域编号', prop: 'roomNo' },
        { label: '面积', prop: 'roomArea' ,center:'right'},
      ],
      form: {CLASSNAME:'MbmRoom',status:'10',createDate:'',cerateID:'',buro:'',buildingId:'',pathID:'',roomArea:'0'},
      rules: {
        name: [
          {required:true,message:'请输入房间名称',trigger:'blur'}
        ],
        roomNo: [
        { required: true, message: '请输入房间编号', trigger: 'blur' },
        ],
        roomArea: [
          {required:true,message:'请输入房间面积',trigger:'blur'}
        ],
        buildingNo: [
        { required: true, message: '请输入所属楼栋', trigger: 'blur' },
        ],
        floorNo: [
          {required:true,message:'请输入所属楼层',trigger:'blur'}
        ],
        subBuro: [
        { required: true, message: '请选择所属建筑群', trigger: 'blur' },
        ],
      },
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      totalCount: '',
      shoufeilist: [],
      id: '',
      roomName: '',
      buildingNo:''
    };
  },

  async mounted() {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.orgname=localbuildingId?localbuildingId:''
    }else{
      this.orgname=''
    }
    this.getdatalist() 
    this.gettime()
    const ress = await getloginuserapi()
    this.cerateID= ress.data.entity.userNo
    this.form.cerateID = ress.data.entity.userNo
     // 获取收费类型
    const shoufei = await getzidianxialaapi({ dictType: 'MBM_FEE_TYPE' })
    this.shoufeilist = shoufei.data.list
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
    },
    // 确认新增/修改
    async submit() {
      var formData = new FormData();
      formData.append('className', 'MbmRoom');
      if (this.form.id) {
        const { createDate, cerateID, ...obj } = this.form
        const objecs = { ...obj, lastUpdateID: this.cerateID, lastUpdateDate: this.form.createDate }
        const object = JSON.stringify(objecs);
        formData.append('valueMapJson', object);
        formData.append('entityId', this.id);
        await putlistapi(formData)
      } else {
        const obj = {
        ...this.form,
        orderNo:this.totalCount+1
      }
        const object = JSON.stringify(obj);
      formData.append('parentClassName', 'MbmBuildings');
      formData.append('parentId', this.form.pathID);
      formData.append('valueMapJson', object);
      await postliseapi(formData)
      }
      this.getdatalist() 
      this.$message.success('操作成功')
      this.form={CLASSNAME:'MbmRoom',status:'10',createDate:'',cerateID:'',buro:'',buildingId:'',pathID:'',roomArea:'0'}
      this.dialogVisible=false
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const {data:{totalCount,list}} = await getlistapi({
      pageNo: this.pageobj.pageNo - 1,buildingNo:this.buildingNo,
      pageSize: this.pageobj.pageSize,roomName:this.roomName,
      buildingId:this.orgname
      })
      this.totalCount = totalCount
      this.tableData = list
      this.$refs.tabledata.loading=false
    },
    // 重置
    chongzhi() {
      this.orgname = ''
      this.buildingNo = ''
      this.roomName = ''
      this.getdatalist()
    },
    //  获取当前时间戳
    gettime() {
      this.date=[]
      const date = new Date()
      const year = date.getFullYear() // 年
      const m = date.getMonth() + 1    // 月
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds() 
       const month=m<10?'0'+m:m
       const day = date.getDate()<10?'0'+ date.getDate(): date.getDate()
       this.form.createDate=year+'-'+month+'-'+day+' ' + hour + ':' + minutes+':'+seconds
    },
    // 建筑群下拉
    change(val) {
      const obj = this.qiyelist.filter(ele => ele.subBuro == val)[0]
      this.form.buro = obj.buro
      this.form.buildingId = obj.id
      this.form.pathID = obj.id
    },
   // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('mbm-microservice-biz/mbm/archives/roomSet/exportExcel',{buildingId:this.orgname},'区域房间')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 修改
    modify(val) {
      this.id=val.id
      this.dialogVisible = true
      this.form = { ...val }
      this.change(val.subBuro)
      this.form.cerateID = this.cerateID
      this.form.CLASSNAME = 'MbmRoom'
      this.form.status = '10'
      this.gettime()
    },
    // 删除
    delet(val) {
      this.$confirm('此操作将永久删除该档案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // var formData = new FormData();
          // formData.append('entityId', val.id);
          
          const res = await dellistapi({ id: val.id })
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
              message: res.code == 200 ? '删除成功':res.message
            })

          this.getdatalist() 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 取消
    quxiao() {
      this.form={CLASSNAME:'MbmRoom',status:'10',createDate:'',cerateID:'',buro:'',buildingId:'',pathID:'',roomArea:'0'}
      this.dialogVisible = false
    }
  },
  watch:{
    dialogVisible(val) {
      if (val) {
        this.form.subBuro= this.qiyelist.filter(ele=>ele.id==this.orgname)[0].subBuro
        this.roomArea = '0'
        this.change(this.form.subBuro)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
      }
    }
    .table{
      height: 90%;
      .fenye{
        text-align: right;
        margin-top: 10px;
      }
    }
  }
}
</style>